<template>
    <div class="dailyReport">
        <div class="top">
            <el-form class="xHeight" ref="queryRef" :inline="true" label-width="68px">
                 <el-form-item label="部门">
                    <el-tree-select
                            v-model="treeData"
                            :data="deptTree"
                            :render-after-expand="false"
                            check-strictly
                            check-on-click-node
                            :props="defaultProps"
                            @node-click="handleNodeClick"
                            node-key="id"
                        />
                 </el-form-item>
                  <el-form-item>
                        <el-button type="danger"  @click="reset">重置</el-button>
                        <el-button class="updateRB" @click="getTablist">查询</el-button>
                  </el-form-item>
            </el-form>
            <!-- <el-row>
                <el-col :span="1"></el-col>
    			<el-col :span="1" style="display:flex;align-items: center;">部门：</el-col>
                <el-col :span="2">
                    <el-tree-select
                        v-model="treeData"
                        :data="deptTree"
                        :render-after-expand="false"
                        check-strictly
                        check-on-click-node
                        :props="defaultProps"
                        @node-click="handleNodeClick"
                        node-key="id"
                    />
                </el-col>
                <el-col :span="17"></el-col>
                <el-col :span="1"><el-button type="danger"  @click="reset">重置</el-button></el-col>
                <el-col :span="1"><el-button class="updateRB" @click="getTablist">查询</el-button></el-col>
            </el-row> -->
        </div>
        <div class="center">
            <el-row>
                <el-col :span="11"></el-col>
                <el-col :span="2" style="display: flex;justify-content: space-between;" >
                    <div class="date dateLeft" @click="getMonth(1)" v-html="'<'">  </div>
                    <div style="white-space: nowrap;">{{ fullYear }} 年 {{ month }} 月</div>
                    <div class="date dateRight" @click="getMonth(2)"> > </div>
                </el-col>
                <el-col :span="11"></el-col>
            </el-row>
            <div class="dailyStatisticsBottom">
    			<div class="tableList">
    				<div class="tableTitle">
    					<ul class="tableTitleUl">
    						<li class="tableTitleLi"></li>
    						<li class="tableTitleLili" :style="{ width: 93 / data + '%' }" v-for="count in data">{{ count }}</li>
    					</ul>
    				</div>
    				<div class="tableList" >
                        <div class="tableLists">
                             <ul class="tableSpace" v-for="(item, index) in tableList" :class="{ tableSpaceBack: index % 2 != 0 }">
                                <li class="tableSpaceLi">{{ item.name }}</li>
                                <li class="tableSpaceLili" :style="{ width: 93 / data + '%' }" v-for="items in item.holidayList">
                                    <div  @click="rbtjLi(item, items)" >
                                        <div class="tableLiYel" v-if="items.isExist == 1"></div>
                                        <div class="tableLiNo" v-else></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                         <pagination
                            v-show="total > 0"
                            :total="total"
                            v-model:page="search.pageNum"
                            v-model:limit="search.pageSize"
                            @pagination="getTablist"
                        />
    				</div>
                   
    			</div>
    		</div>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="工作日报"
            width="45%"
            :before-close="handleClose"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
        >
            <getDailys :myDailyList="myDailyList"></getDailys>
            <template #footer>
                <el-button  @click="handleClose">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { getDeptTreeselect } from '@/api/dept';
import { reportList,getReportByDate } from '@/api/dailyReport';
import { ElMessage } from 'element-plus';
import getDailys from './getDailys.vue';
import mydailyStore from "@/store/modules/mydaily";
const store = mydailyStore();
const { proxy } = getCurrentInstance();
const deptTree = ref([]);
const treeData = ref();
const defaultProps = {
    children: 'children',
    label: 'label',
}
let total = ref(0);
let tableList = ref([]);
let myDailyList = ref([]);
let dialogVisible = ref(false);
const fullYear = ref(new Date().getFullYear());
const month = ref(new Date().getMonth() + 1);
const data = ref(0);
const search = ref({
    pageNum: 1,
    pageSize: 10,
    deptId: '',
    month: ''
})
const getTreeSelect = () => {
    getDeptTreeselect().then(res => {
        if (res.code === 200) {
            deptTree.value = res.data;
        }
    })
}
const reset = () => {
    treeData.value = ''; 
    getTablist();
}
const handleNodeClick = (e) => {
    treeData.value = e;
    proxy.$nextTick(() => {
        getTablist();
    })
};
const getMonth = (type) => {
    if (type == 1) {
        month.value -= 1;
        if (month.value == 0) {
            fullYear.value -= 1;
            month.value = 12;
        }
    }
    if (type == 2) {
        if (fullYear.value >= new Date().getFullYear() && month.value >= new Date().getMonth() + 1) {
            return false;
        } else {
            month.value += 1;
            if (month.value == 13) {
                fullYear.value += 1;
                month.value = 1;
            }
        }
    }
    getTableTitle();
    getTablist();
};
const getTableTitle = () => {
    if (fullYear.value == new Date().getFullYear() && month.value == new Date().getMonth() + 1) {
        data.value = new Date().getDate();
    } else {
        data.value = new Date(fullYear.value, month.value, 0).getDate();
    }
}

const getDays = (year, month) => {
    let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    if ((year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0)) {
        days[1] = 29
    }
    return days[month]  
}

const getTablist = () => {
    // if (!treeData.value) {
    //     ElMessage.error({ message: '请选择部门', type: 'success', duration: 1 * 1000 })
    //     return false;
    // }
    search.value.deptId = treeData.value ? treeData.value : '',
    search.value.month = fullYear.value + '-' + (month.value < 10 ? '0' + month.value : month.value)
    reportList(search.value).then(res => {
        if (res.code === 200) {
            total.value = parseInt(res.total);
            tableList.value = res.rows;
        }
    })
}

const rbtjLi = (item1, item2) => {
    if (item2.isExist == 1) {
        let form = {
            userId: item1.userId,
            date: item2.date
        };
        store.date = item2.date;
        getReportByDate(form).then(res => {
            if (res.code === 200) {
                myDailyList.value = res.data;  
                dialogVisible.value = true;
            }
        })
    } else {
        ElMessage({ message: '暂无日报', type: 'info', duration: 1 * 1000 })
    }
}
const handleClose = (done) => {
    getTablist();
    dialogVisible.value = false;
}
getTreeSelect();
getTableTitle();
proxy.$nextTick(() => {
    getTablist();
})
</script>

<style lang="scss" scoped>
  .dailyReport{
    height: 100%;
    overflow: auto;
    .top{
        background: #ffffff;
        padding: 20px 20px 2px 20px;
        border-radius: 10px;
        .pst {
            position: absolute;
            right: 36px;
            padding: 6px;
        }
        :deep(.xHeight){
            .el-form-item__label {
                height: 40px;
                line-height: 40px;
            }
        }
       
    }
    .center{
        width: 100%;
        height: 87%;
        background-color: #ffffff;
        border-radius: 10px;
        margin-top:20px;
        .el-row{
            height: 64px;
            line-height: 64px;
            color: #1e1e1e;
            font-size: 18px;
            font-weight: bold;
            .date{
                cursor: pointer;
            }
        }
        .dailyStatisticsBottom {
            width: 100%;
            height: calc(100% - 64px);
            .tableList {
                width: 100%;
                height: 100%;
                .tableTitle {
                    width: 100%;
                    height: 7%;
                    .tableTitleUl {
                        width: 98%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-inline-start: 0px;
                        margin-block-start: 0;
                        margin-block-end: 0;
                        list-style: none;
                        background: #F3F3F3;
                        border-radius: 8px;
                        margin: 0 auto;
                        .tableTitleLi {
                            width: 7%;
                            text-align: center;
                            font-size: 14px;
                        }
                        .tableTitleLili {
                            text-align: center;
                        }
                    }
                }
                .tableList {
                    width: 100%;
                    height: calc(100% - 50px);
                   // overflow-y: auto;
                    .tableSpaceBack{
                        background-color: #F3F3F3;
                        
                    }
                    .tableSpace {
					width: 98%;
					display: flex;
					justify-content: center;
					align-items: center;
					padding-inline-start: 0px;
					margin-block-start: 0;
					margin-block-end: 0;
                    margin: 0 auto;
                    list-style: none;
                    border-radius: 8px;
                    padding: 16px 0;
					.tableSpaceLi {
						width: 7%;
						text-align: center;
                        font-size: 14px;
                        
					}
					.tableSpaceLili {
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						.tableLiYel {
							cursor: pointer;
							width: 20px;
							height: 20px;
							background: url('../../assets/daily/yes.png') center center no-repeat;
							background-size: 100% auto;
						}
						.tableLiNo {
							cursor: pointer;
							width: 20px;
							height: 20px;
							background: url('../../assets/daily/no.png') center center no-repeat;
							background-size: 100% auto;
						}
					}
				}
                }
            }
        }
    }
  }  
  .el-button--danger{
       background: #FFDADE;
       color: #BE1A21; 
       border-color:#FFDADE;
    }
    .updateRB{
       background: #BE1A21;
       color: #ffffff; 
       border-color:#BE1A21;
    }
</style>